import { convertImgUrl } from "@/utils/MyFun";
import { Icon } from "@iconify/react";
import { Avatar, Col, Row } from "antd";

import styled from "styled-components";

const Styled = styled.div`
  .title {
    margin-bottom: 5rem;
    font-size: 6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    span {
      margin-left: 3rem;
    }
  }
  .other {
    border-radius: 2rem;
    position: relative;
    transition-property: color, background-color, border-color,
      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
      filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
  .a {
    display: flex;
    flex-direction: row;
    padding: 1.25rem;
    text-decoration: none;
    transition: all 600ms;
    &:hover {
      color: white;
    }
  }
  .one-box {
    width: 30rem;
    margin-right: 1.25rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .two-box {
    text-align: center;
    width: 65rem;
    height: 23.75rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    .content {
      width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
      overflow: hidden; /*内容会被修剪，并且其余内容是不可见的。*/
    }
  }
  .link-wrapper {
    &:hover {
      box-shadow: 0 2px 20px #49b1f5;
    }
    &:hover::before {
      content: "";
      transform: scale(1);
    }
    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: #49b1f5;
      border-radius: 8px;
      transition-timing-function: ease-out;
      transition-duration: 0.3s;
      transition-property: transform;
      transform: scale(0);
    }
    &:hover .avatar {
      transform: rotate(360deg);
    }
  }
`;

const LinkList = ({ linkList = [] }) => {
  return (
    <Styled>
      {/* 标题 */}
      <p className="title">
        <Icon icon="mdi:link-variant" color="skyblue" />
        <span>友情链接</span>
      </p>
      {/* 数量为0 和 不为0情况*/}
      {!linkList.length === 0 ? (
        <></>
      ) : (
        <>
          <Row gutter={12}>
            {linkList.map((link) => {
              return (
                <Col key={link.id} span={8} className="link-wrapper other">
                  <a className="a" href={`#/${link.address}`} target="_blank">
                    <div className="one-box">
                      <Avatar
                        src={convertImgUrl(link.avatar)}
                        size={65}
                        className="avatar"
                      />
                    </div>
                    <div className="two-box">
                      <div style={{ width: "100%" }}>
                        <p>{link.name}</p>
                        <p className="content">{link.intro}</p>
                      </div>
                    </div>
                  </a>
                </Col>
              );
            })}
          </Row>
        </>
      )}
    </Styled>
  );
};

export default LinkList;
